import React, { Component } from "react";
import { Button, Card, Input, Space } from "antd";

import "./index.scss";

import axios from "axios";

export default class Register extends Component {
    /**
     * constructor 函数是用来初始化类的实例的
     * 因为继承父类，所以在初始化实例的时候，需要先使用 super() 调用一下父级构造函数
     *
     * @param {*} props
     */
    constructor(props) {
        super(props);
        this.state = {
            username: "",
            password: "",
            nickname: "",
        };
    }

    async onRegisterClicked() {
        console.log(this.state);
        const res = await axios.post("/users", this.state);
        console.log(res);
    }

    render() {
        return (
            <div className="register">
                <div className="wrapper">
                    <Card title="注册">
                        <Space
                            className="block"
                            direction="vertical"
                            size="large"
                        >
                            <Input
                                placeholder="请输入用户名"
                                onChange={(e) =>
                                    this.setState({ username: e.target.value })
                                }
                            />

                            <Input.Password
                                placeholder="请输入密码"
                                onChange={(e) =>
                                    this.setState({ password: e.target.value })
                                }
                            />

                            <Input
                                placeholder="请输入昵称"
                                onChange={(e) =>
                                    this.setState({ nickname: e.target.value })
                                }
                            />

                            <Button
                                type="primary"
                                block
                                onClick={() => this.onRegisterClicked()}
                            >
                                注册
                            </Button>
                        </Space>
                    </Card>
                </div>
            </div>
        );
    }
}
